<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/vue.global.js"></script>
    <!-- 现代化框架都是数据驱动. -->
    <style>
        .active{
            color:red;
            background-color: gray;
        }
        .font15{
            font-size:25px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- tab切换 onClick onclick onmouseover onmousemove -->
        <!-- v-bind: 绑定属性数据 v-on: 绑定事件 -->
        <!-- v-bind: 绑定属性 
             type href id class style
             <div id="" class="abc bcd" style="color:red;font-size:20px;"></div>
           在vue里面 class属性绑定支持对象写法 数组写法 
             v-bind:class="{css的class类名:条件判别式}"
             v-bind:class="['fontsize','fontBold',{active:判别式}]" 多个类名
           style属性绑定用对象语法 
        -->
        <p v-bind:style="[pstyle,{fontSize:'25px',backgroundColor:'red'}]">这是一个段落哈_哈</p>
        <div>
            <!-- <span v-bind:style="{color:tabIndex==0?'red':''}" 
            v-on:click="changeTab(0)">产品详情</span>
            <span  v-bind:style="{color:tabIndex==1?'red':''}"
                 v-on:click="changeTab(1)">产品评论</span>
            <span  v-bind:style="{color:tabIndex==2?'red':''}"
                v-on:click="changeTab(2)">包装</span> -->
                <!-- v-bind:class="tabIndex==0?'active':''" 类名绑定  -->
                <span v-bind:class="['font15',{active:tabIndex==0}]" v-on:click="tabIndex=0">产品详情</span>
                <span v-bind:class="['font15',{active:tabIndex==1}]" v-on:click="tabIndex=1">产品评论</span>
                <span v-bind:class="tabIndex==2?'active':''" v-on:click="tabIndex=2">包装</span>
        </div>
        <div>
            <!-- 条件渲染 v-if=“条件” v-else-if="" v-else -->
            <div v-if="tabIndex==0"><h1>产品详情</h1>
                <!-- 属性绑定demo v-bind:指令 绑定属性数据 -->
                <!-- v-bind:属性名称="js表达式" -->
                <input v-bind:type="inputType"/>
                <!-- v-on:事件名称="js表达式" -->
                <button v-on:click="inputType='password'">隐藏密码</button>
                <button v-on:click="inputType='text'">显示密码</button>
            </div>
            <div v-else-if="tabIndex==1">
                <h1>产品评论</h1>
                <ul>
                    <li>好评如潮1</li>
                    <li>好评如潮2</li>
                    <li>好评如潮3</li>
                </ul>
            </div>
            <div v-else>
                <h1>{{desc}}</h1>
                <div v-html="desc"></div>
            </div>
        </div>
    </div>
    <script>
        const app=Vue.createApp({
            data(){
                return {
                    tabIndex:0, //记录需要显示tab选项卡的下标
                    inputType:"password",
                    pstyle:{
                        color:"white",
                        fontWeight:"bold"
                    },
                    desc:"包装<a href='http://jd.com'>详细</a>"
                }
            },
            methods:{
                //这里为什么直接可以调用this里面的数据？
                changeTab(index){
                    //改变数据
                    this.tabIndex=index;
                }
            }
        });
        app.mount("#app");
    </script>
    <!-- vue模板语法:
    指令:   v-指令名称:属性名称="js表达式"
    v-bind: 属性绑定  v-bind:属性名称="js表达式"
            css类名绑定  支持数组 对象方式绑定
            style属性绑定 支持数组 对象
    v-on:事件名称="事件处理表达式 可以式函数名称 也可以式表达式"
    v-if="条件"
    v-else-if="条件"
    v-else
    模板 文本插值: {{js表达式}} 如果表达式里面有标签不会被编译成标签。
         而是直接作为文本输出.  安全,避免跨站攻击
        html插值:
            v-html="js表达式"   不安全 很容易出现跨站攻击
            v-text=""
    -->
</body>
</html>